<template>
	<view>
		<view class="container">
			<view class="user-title">就诊信息</view>
			<view class="user-body">
				<view class="user-info">
					<view>就诊人</view>
					<view>{{user.name}}</view>
				</view>
				<view class="user-info">
					<view>证件号</view>
					<view>{{user.certificateId}}</view>
				</view>
				<view class="user-info">
					<view>医院名称</view>
					<view>{{hosp.name}}</view>
				</view>
				<view class="user-info">
					<view>就诊日期</view>
					<view>{{order.orderTime}}</view>
				</view>
			</view>
		</view>
		
		<view class="container">
			<view class="user-title">处方单</view>
			<view class="line"></view>
			<view>
				<uni-table stripe="true">
					<uni-tr>
						<uni-th align="center" width="50px">项目名称</uni-th>
						<uni-th align="center" width="30px">单价(元)</uni-th>
						<uni-th align="center" width="30px">数量</uni-th>
						<uni-th align="center" width="30px">金额(元)</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td>{{order.itemName}}</uni-td>
						<uni-td align="center">{{order.itemName.indexOf('单') == -1? '10.00':'40.00'}}</uni-td>
						<uni-td align="center">1.00</uni-td>
						<uni-td align="center">{{order.itemName.indexOf('单') == -1? '10.00':'40.00'}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<view>
			<view style="font-weight: bold;margin-right: 10px;">二维码</view>
			<view class="uqrcode">
				<canvas id="qrcode" canvas-id="qrcode" :style="{'width': `${size}px`, 'height': `${size}px`}" />
				<view class="uqrcode-text">
					<view>就诊时请出示</view>
					<view>左侧二维码</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uQRCode from '@/libs/uqrcode.js'
	export default {
		data() {
			return {
				orderId:-1,
				userId:-1,
				hospId:-1,
				order:null,
				user:null,
				hosp:null,
				size: 168,
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: 'green'
			};
		},
		onLoad(options) {
			this.orderId = options.orderId
			console.log('orderId:'+this.orderId)
			this.getOrder()
		},
		mounted() {
			console.log("a2")
			this.getUser()
			this.getHospInfo()
		},
		methods:{
			//获取预约信息
			getOrder(){
				uni.request({
					url:'http://192.168.43.224:9002/order/getOrderById/'+this.orderId,
					method:'GET',
					success: (res) => {
						this.order = res.data.data
						console.log(this.order)
						this.userId = this.order.userId
						this.hospId = this.order.hospId
						console.log('userId:'+this.userId)
						console.log('hospId:'+this.hospId)
					}
				})
			},
			
			//获取用户信息
			async getUser(){
				await uni.request({
					url:'http://192.168.43.224:9002/user/getUserById/'+this.userId,
					method:'GET',
					success: (res) => {
						this.user = res.data.data
					}
				})
			},
			
			//获取检测点名称
			async getHospInfo(){
				await uni.request({
					url:'http://192.168.43.224:9001/admin/hospinfo/getHospInfoById/'+this.hospId,
					method:'GET',
					success: (res) => {
						this.hosp = res.data.data
						console.log('获取的hosp:'+this.hosp)
					}
				})
			},
		},
		onReady() {
			console.log("a1")
			let modules = uQRCode.getModules({
			      text: '请出示此二维码就诊,userId:'+this.userId+',orderId:'+this.orderId,
			      errorCorrectLevel: uQRCode.errorCorrectLevel.H
			    })
			    let tileSize = (this.size - this.margin * 2) / modules.length
			    // 获取绘图所需的上下文
			    let ctx = uni.createCanvasContext('qrcode', this)
			    // 开始绘制
			    ctx.setFillStyle(this.backgroundColor)
			    ctx.fillRect(0, 0, this.size, this.size)
			    for (var row = 0; row < modules.length; row++) {
			      for (var col = 0; col < modules.length; col++) {
			        // 计算每一个小块的位置
			        var x = col * tileSize + this.margin
			        var y = row * tileSize + this.margin
			        var w = tileSize
			        var h = tileSize
			
			        var style = modules[row][col] ? this.foregroundColor : this.backgroundColor
			        ctx.setFillStyle(style)
			        ctx.fillRect(x, y, w, h)
			      }
			    }
			    ctx.draw()
		}
	}
</script>

<style lang="scss">
.line{
	background-color: #40E0D0;
	width: 100%;
	height: 2px;
}	
.container{
	margin-bottom: 10px;
	padding: 10px 10px;
	background-color: #FFFFFF;
	height: 160px;
	
	.user-title{
		margin-left: 10px;
		font-weight: bold;
		margin-bottom: 5px;
	}
	.user-body{
		.user-info{
			display: flex;
			justify-content: space-between;
			margin: 10px 10px;
		}
	}
}
.uqrcode{
	margin-right: 60px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.uqrcode-text{
		flex-direction: column;
	}
}
</style>
